<template>
  <!-- 1. 音乐主页 -->
  <div class="music">
    <zeroHeader></zeroHeader>
    <!-- 2. 固定的滚动容器 -->
    <div class="wrapper" ref="wrapper" :style="{'bottom':$store.state.curindex!=-1?'40px':''}">
      <!-- 3. 下拉刷新的加载样式 -->
      <mt-spinner :type="2" color="#d43c33" v-if="showspinner"></mt-spinner>
      <!-- 4. 可滚动内容的容器 -->
      <div class="content">
        <!-- 5. 轮播图组件 -->
        <zeroSwiper :bannerList="bannerList"></zeroSwiper>

        <!-- 6. 导航按钮 -->
        <div class="navbar">
          <router-link to="recommend">
            <i class="iconfont icon-tubiao"></i>
            歌单
          </router-link>
          <router-link to="rank">
            <i class="iconfont icon-paixingbang"></i>
            排行
          </router-link>
          <router-link to="singer">
            <i class="iconfont icon-geshou"></i>
            歌手
          </router-link>
        </div>
        <!-- 7. 推荐歌单 -->
        <div class="commend_box">
          <div class="head">
            <div class="head_left">推荐歌单</div>
            <div class="head_right" @click="go_recommend">歌单广场</div>
          </div>
          <!-- 8. loading组件 -->
          <zeroLoading v-if="commendList.length==0"></zeroLoading>
          <!-- 9. 推荐的歌单 -->
          <div class="commend_list" v-else>
            <div
              class="commend_item"
              v-for="(item, index) in commendList"
              :key="index"
              @click="get_songlist(item.id)"
            >
              <div class="commend_item_cover">
                <img v-lazy="item.coverImgUrl+'?param=150y150'" alt />
                <div class="item_playCount">
                  <i class="iconfont icon-erji"></i>
                  {{item.playCount>1.0e8?(item.playCount/1.0e8).toFixed(0)+'亿':item.playCount>1.0e4?(item.playCount/1.0e4).toFixed(0)+'万':item.playCount }}
                </div>
              </div>
              <div class="commend_item_name">{{item.name}}</div>
            </div>
          </div>
        </div>
        <!-- 10. 推荐的歌曲 -->
        <div class="commend_song">
          <div class="head">
            <div class="head_left">推荐歌曲</div>
          </div>
          <zeroSongs :zerosongs="songs"></zeroSongs>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import zeroHeader from "@/components/ZeroHeader.vue";
import zeroSwiper from "@/components/ZeroSwiper.vue";
import zeroLoading from "@/components/ZeroLoading.vue";
import zeroSongs from "@/components/ZeroSongs.vue";
import BScroll from "better-scroll";

export default {
  name: "music",
  data() {
    return {
      bannerList: [], // 轮播图列表
      commendList: [], // 推荐歌单列表
      songs: [], // 推荐歌曲列表
      showspinner: false // 下拉加载动画
    };
  },
  methods: {
    go_recommend() {
      this.$router.push({
        name: "recommend"
      });
    },
    // 带歌单 id 跳转到歌单页
    get_songlist(id) {
      this.$router.push({
        name: "songlist",
        params: {
          id
        }
      });
    },
    //初始化数据
    init() {
      //轮播图,推荐歌单,推荐个区的接口
      let { banner, top_playlist, top_song } = this.api;
      // 1. 获取 banner
      this.getsource(banner).then(res => {
        console.log("轮播图", res);
        this.bannerList = res.data.banners;
      });
      // 2. 获取推荐歌单
      this.getsource(top_playlist).then(res => {
        console.log("推荐歌单", res);
        this.commendList = res.data.playlists;
      });
      // 3. 获取推荐歌曲
      this.getsource(top_song).then(res => {
        console.log("推荐歌曲", res);
        // 只要前50条
        let temp = res.data.playlist.tracks.filter((item, index) => index < 50);
        this.songs = temp;
      });
    }
  },
  // 页面加载时执行初始化数据方法
  created() {
    this.init();
  },
  // better-scroll的函数
  mounted() {
    this.$nextTick(() => {
      //$refs绑定元素
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          //开启点击事件 默认为false
          click: true,
          //鼠标滚动
          mouseWheel: true,
          pullDownRefresh: {
            // 下拉距离超过30px触发pullingDown事件
            threshold: 30,
            // 回弹停留在距离顶部30px的位置
            stop: 20
          }
        });
        this.scroll.on("pullingDown", () => {
          // console.log("处理下拉刷新操作");
          this.showspinner = true;
          this.init();
          setTimeout(() => {
            // console.log("刷新成功");
            // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
            this.scroll.finishPullDown();
            this.showspinner = false;
          }, 1500);
        });
      } else if (!this.$refs.wrapper) {
        return;
      } else {
        this.scroll.refresh();
      }
    });
  },
  components: {
    zeroHeader,
    zeroSwiper,
    zeroLoading,
    zeroSongs
  }
};
</script>


<style lang='scss' scoped>
$zerocolor: #d43c33;
$fontcolor: #333;
.music {
  width: 100%;
  .wrapper {
    width: 100%;
    position: absolute;
    bottom: 0px;
    top: 50px;
    overflow: hidden;
    // 轮播图
    .zeroswiper {
      width: 100%;
      height: 35vw;
      max-height: 320px;
    }
    // 导航按钮
    .navbar {
      margin-top: 5px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      a {
        font-size: 14px;
        text-align: center;
        i {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: $zerocolor;
          display: block;
          color: #fff;
          font-size: 26px;
          line-height: 50px;
        }
      }
    }
    // 推荐歌单
    .commend_box {
      .head {
        border-left: 2px solid $zerocolor;
        margin: 10px;
        text-align: left;
        padding-left: 5px;
        display: flex;
        justify-content: space-between;
        .head_left {
          font-weight: 500;
        }
        .head_right {
          border: 1px solid $zerocolor;
          border-radius: 20px;
          font-size: 14px;
          padding: 0 10px;
          font-weight: 500;
          color: $fontcolor;
        }
      }
      .commend_list {
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .commend_item {
          width: 30%;
          margin: 10px 0;
          .commend_item_cover {
            width: 100%;
            height: 28vw;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              box-shadow: inset 0 15px 20px -10px #000;
            }
            img {
              width: 100%;
              height: 100%;
            }
            .item_playCount {
              position: absolute;
              top: 2px;
              right: 8px;
              font-size: 12px;
              color: #fff;
              font-weight: 500;
              z-index: 5;
            }
          }
          .commend_item_name {
            font-size: 12px;
            color: $fontcolor;
            text-align: left;
          }
        }
      }
    }
    // 推荐歌曲
    .commend_song {
      .head {
        border-left: 2px solid $zerocolor;
        margin: 10px;
        text-align: left;
        padding-left: 5px;
        display: flex;
        justify-content: space-between;
        .head_left {
          font-weight: 500;
        }
      }
    }
  }
}
</style>